<!-- 支付 -->
<template>
  <div class="">
    <div class="title">会费收款方式设置</div>
    <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item v-if="form.weChatPay" label="微信支付配置">
        <a-switch :checked="form.weChatPayEnabled" @change="handleWeChatPayEnabled" />
      </a-form-model-item>
      <a-form-model-item v-if="form.qrCodeCollection" label="二维码收款配置">
        <a-switch v-model="form.qrCodeCollectionEnabled" />
      </a-form-model-item>
      <template v-if="form.qrCodeCollection && form.qrCodeCollectionEnabled">
        <a-form-model-item label="名称1" prop="qrCodeName1">
          <a-input v-model="form.qrCodeName1" placeholder="请输入收款码，如微信、支付宝等" />
        </a-form-model-item>
        <a-form-model-item label="收款码1" prop="qrCode1">
          <UploadImg v-model="form.qrCode1" warehouse cropper :fileSize="5" :width="120" :height="120">
            <template #tips> 100*100 </template>
          </UploadImg>
        </a-form-model-item>
        <a-form-model-item label="名称2">
          <a-input v-model="form.qrCodeName2" placeholder="请输入收款码，如微信、支付宝等" />
        </a-form-model-item>
        <a-form-model-item label="收款码2">
          <UploadImg v-model="form.qrCode2" warehouse cropper :fileSize="5" :width="120" :height="120">
            <template #tips> 100*100 </template>
          </UploadImg>
        </a-form-model-item>
      </template>
      <a-form-model-item v-if="form.bankAccountCollection" label="银行收款账户配置">
        <a-switch v-model="form.bankAccountCollectionEnabled" />
      </a-form-model-item>
      <template v-if="form.bankAccountCollection && form.bankAccountCollectionEnabled">
        <a-form-model-item label="收款单位">
          <a-input v-model="form.collectionUnit" placeholder="请输入开户名称" />
        </a-form-model-item>
        <a-form-model-item label="账号">
          <a-input v-model="form.bankAccount" placeholder="请输入银行账号" />
        </a-form-model-item>
        <a-form-model-item label="开户行">
          <a-input v-model="form.bankDeposit" placeholder="请输入银行开户行" />
        </a-form-model-item>
        <a-form-model-item label="转账提示">
          <a-input v-model="form.remark" placeholder="请在转帐中备注'会费'" />
        </a-form-model-item>
      </template>
      <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" @click="onSubmit"> 保存 </a-button>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import UploadImg from '@/components/UpFile/uploadImg'
import { PayInfo, UpdatePayInfo } from '@/api/system/base'
import { getMerchantAccount } from '@/api/finance/finance'
import { Modal } from 'ant-design-vue'
export default {
  components: {
    UploadImg
  },
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      form: {
        weChatPay: true,
        weChatPayEnabled: true,
        qrCodeCollection: true,
        qrCodeCollectionEnabled: false,
        bankAccountCollection: false,
        bankAccountCollectionEnabled: false,
        qrCode1: undefined,
        qrCodeName1: undefined,
        qrCode2: undefined,
        qrCodeName2: undefined,
        collectionUnit: undefined,
        bankAccount: undefined,
        bankDeposit: undefined,
        remark: undefined,
      },
      rules: {
        qrCodeName1: [{ required: true, message: '请输入收款码，如微信、支付宝等', trigger: 'blur' }],
        qrCode1: [{ required: true, message: '请上传收款码', trigger: 'change' }],
      },
    }
  },
  computed: {},
  watch: {},
  methods: {
    async getPayInfo() {
      let res = await PayInfo()
      if (res.code === 0) {
        Object.keys(this.form).forEach((k) => {
          this.form[k] = res.data[k]
        })
      }
    },
    onSubmit() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          let { code, msg } = await UpdatePayInfo({ ...this.form })
          this.$message[code === 0 ? 'success' : 'error'](msg)
          if (code === 0) {
            this.getPayInfo()
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleWeChatPayEnabled(val) {
      if (val) {
        this.queryMerchantAccount().then(() => {
          this.form.weChatPayEnabled = val
        })
      } else {
        this.form.weChatPayEnabled = val
      }
    },
    async queryMerchantAccount() {
      const { data } = await getMerchantAccount()
      this.merchantAccount = data
      if (data.settleAccountInfo && data.settleAccountInfo.authStatus) return Promise.resolve()
      Modal.confirm({
        title: '提示',
        content: '本组织暂未开通支付，不可开启微信支付！',
        cancelText: '暂不开通',
        okText: '去开通',
        onCancel: () => { },
        onOk: () => {
          this.$router.push({
            path: '/system/paySettings',
            query: {
              titleKey: 'onlinePayment'
            }
          })
        }
      })
      return Promise.reject()
    },
  },
  created() {
    this.getPayInfo()
  },
  mounted() { },
}
</script>
<style scoped>
.avatar-uploader>.ant-upload {
  width: 128px;
  height: 128px;
}

.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

.title {
  font-size: 18px;
  font-weight: bold;
  padding: 10px 0;
}
</style>